<template>
  <div class="register">
    <div class="form-box" style=" height: 496px;">
      <div class="form-first clear">
        平台注册
      </div>
      <div class="form clear">
        <div class="form-label">
          <img src="@/assets/images/loginU.png" width="26px" />
        </div>
        <div class="form-input">
          <input v-model="phone" type="text" placeholder="请填写手机号码" />
        </div>
      </div>
      <div class="form clear">
        <div class="form-label">
          <img src="@/assets/images/loginM.png" width="26px" />
        </div>
        <div class="form-input form-message">
          <input v-model="code" type="text" placeholder="请填写短信密码" />
          <el-button
            type="text"
            size="mini"
            :disabled="isdisabled"
            @click="attrVerif"
            >{{ attrcode }}</el-button
          >
        </div>
      </div>
      <div class="form clear">
        <div class="form-label">
          <img src="@/assets/images/loginP.png" width="26px" />
        </div>
        <div class="form-input">
          <input
            v-model="password"
            type="password"
            placeholder="请填写8~18位密码"
          />
        </div>
      </div>
      <div class="form clear" style="margin-bottom:10px;">
        <div class="form-label">
          <img src="@/assets/images/loginP.png" width="26px" />
        </div>
        <div class="form-input">
          <input
            v-model="passwordConfirm"
            type="password"
            placeholder="请再次填写8~18位密码"
          />
        </div>
      </div>
      <div class="forget-pwd">
        <div class="forget-left">
          <router-link :to="{ name: 'login' }" exact class="active" tag="a"
            >登录</router-link
          >
        </div>
      </div>
      <button class="form-btn form-btn-top" @click="registerFn">注册</button>
    </div>
  </div>
</template>

<script>
import { REGISTER, CODE } from "./service";
export default {
  data() {
    return {
      phone: "",
      password: "",
      code: "",
      passwordConfirm: "",
      isdisabled: false,
      attrcode: "获取验证码",
      timer: 30
    };
  },
  created: function() {
    this.$emit("publicfooter", true);
  },
  methods: {
    showModel(type) {
      this.setType = type;
    },
    async registerFn() {
      let params = {
        password_confirm: this.passwordConfirm,
        phone: this.phone,
        password: this.password,
        code: this.code
      };
      if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(params.phone)) {
        this.$message({
          message: "请输入正确手机号",
          type: "error"
        });
        return;
      }
      await REGISTER(params).then(({ code, data, msg }) => {
        if (code === 200) {
          this.$message({
            message: "注册成功",
            type: "success"
          });
          this.$router.push({ name: "login" });
          this.$store.commit("_token", data.id);
        } else {
          this.$message({
            message: msg,
            type: "error"
          });
        }
      });
    },
    async attrVerif() {
      let params = {
        phone: this.phone
      };
      await CODE(params).then(res => {
        const { code, msg } = res;
        if (+code === 200) {
          this.isdisabled = true;
          var timerhandle = setInterval(() => {
            this.attrcode = "重新发送(" + this.timer + "s)";
            if (this.timer === 0) {
              clearInterval(timerhandle);
              this.attrcode = "获取验证码";
              this.timer = 30;
              this.isdisabled = false;
            }
            this.timer--;
          }, 1000);

          this.$message({
            message: "验证码发送成功",
            type: "success"
          });
        } else {
          this.$message({
            message: msg,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/scss/login";
</style>
